import React, {useState} from 'react';
import Input from '../components/Input';

import "./assets/canvas.css";

export default {
  title: '3 - Input',
  component: Input,
	decorators: [
		(Story) => (
			<div className="canvas">
				<Story/>
			</div>
		),
	],
	argTypes: {
    color: {options: ['red', 'blue', 'yellow', 'orange', 'purple', 'cyan', 'base03']},
    type: {
      type: 'string',
      options: ['password', 'text', 'numeric'],
      defaultValue: 'text',
    },
    isDisabled: {
      type: 'boolean',
      defaultValue: false,
    }
	},
}

const Template = (args) => {

  const [value, setValue] = useState("Example Input");

  const onChange = (e) => {
    setValue(e.target.value);
  }
  return <div style={{position: 'relative', width: 200}}>
    <div>label </div>
    <Input {...{value, onChange, ...args}} ></Input>
  </div>;
}

export const Default = Template.bind({});

Default.args = {
	
}
